<template>
  <div id="sdt"></div>
</template>

<script>
import { defineComponent, ref, onMounted, computed, nextTick } from "vue";
export default defineComponent({
  name: "Sdt",
});
</script>
<script setup>
import * as echarts from "echarts";

// nextTick异步
nextTick(() => {
  let dom = document.getElementById("sdt");
  let myChart = echarts.init(dom);

  var data = [
    //X轴，Y轴，半径，名称，颜色
    [
      [1, 1, 5, "a", "blue"],
      [5, 0.85, 5, "e", "blue"],
    ],
    [
      [2, 0.5, 1, "b", "yellow"],
      [6, 0.3, 1, "f", "yellow"],
    ],
    [
      [7, 0.5, 2, "g", "red"],
      [9, 0.3, 2, "y", "red"],
    ],
  ];

  let option = {
    // legend: {
    //   right: 10,
    //   data: ["blue", "yellow", "red"],
    // },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 16,
        interval: 0, // 不隔断直接显示
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: "rgba(51, 74, 102, 1)",
        },
      },
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          type: "dashed",
          width: 2,
          color: "rgba(51, 74, 102, 1)",
        },
      },
      scale: true,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: "rgba(51, 74, 102, 1)",
        },
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: "blue",
        data: data[0],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1e1;
        },
        emphasis: {
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3] + " " + param.data[2];
            },
            position: "top",
          },
        },
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "#40c2ff",
            },
            {
              offset: 1,
              color: "#40c2ff",
            },
          ]),
        },
      },
      {
        name: "yellow",
        data: data[1],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1e1;
        },
        emphasis: {
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: "top",
          },
        },
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "#ffcc1b",
            },
            {
              offset: 1,
              color: "#ffcc1b",
            },
          ]),
        },
      },
      {
        name: "red",
        data: data[2],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1e1;
        },
        emphasis: {
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: "top",
          },
        },
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "#ff3c3c",
            },
            {
              offset: 1,
              color: "#ff3c3c",
            },
          ]),
        },
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#sdt {
  width: 50vw;
  height: 50vh;
  background: black;
}
</style>
